import React, { useState, useEffect } from 'react'

const GoodsDetailInfo = (props) => {

  const { defaultSX, mySX } = props

  const [tabskey, setTabskey] = useState(0)


  useEffect(() => {
    props.refreshHeight()
    return () => {
    }
  }, [tabskey])

  const goodsDetail = tabskey === 0 ? { display: 'block' } : { display: 'none' };
  const goodsAttributes = tabskey === 1 ? { display: 'block' } : { display: 'none' };


  return (
    <div className="goods-detail-info common-card">
      <ul className=" flex-row ">
        {
          [
            { title: '商品详情' },
            { title: '商品属性' },
          ].map((item, key) => {
            return (
              <li onClick={e => { changTabs(key) }} key={key} className={key === tabskey ? 'active' : ''}>
                <span>
                  {item.title}
                </span>
              </li>
            )
          })
        }
      </ul>

      <div className="tab" style={goodsDetail}>

        {
          props.gdesc !== "" &&
          <CreateDesc desc={props.gdesc} ></CreateDesc>
        }
        {
          props.gdesc === "" &&
          <div className="no-content flex-column"> <img src="https://res.lexiangpingou.cn/images/826/2020/09/dkE75SxicZJz95ICBaJcI9sEZECB5K.png" alt="" /> <p>暂无内容</p> </div>
        }

      </div>

      <div className="tab" style={goodsAttributes}>
        <div style={{
          height: 'auto',
          color: '#222836',
        }}>

          {
            defaultSX !== "" &&
            defaultSX.map((item, key) => {
              return (
                <div className="flex-row" key={key + item.attr} style={key !== 0 ? { marginTop: '.39rem' } : {}} >
                  <span>{item.attr}</span>
                  <span>{item.value}</span>
                </div>
              )
            })
          }
          {
            defaultSX !== "" &&
            <hr style={{
              color: '#222836',
              opacity: '.2',
              margin: ' .39rem 0'
            }} />

          }
          {
            mySX !== "" &&
            mySX.map((item, key) => {
              return (
                <div className="flex-row" key={key + item.attr} style={key !== 0 ? { marginTop: '.39rem' } : {}}>
                  <span>{item.attr}</span>
                  <span>{item.value}</span>
                </div>
              )
            })
          }

          {
            defaultSX === "" && mySX === "" &&
            <div className="no-content flex-column"> <img src="https://res.lexiangpingou.cn/images/826/2020/09/dkE75SxicZJz95ICBaJcI9sEZECB5K.png" alt="" /> <p>暂无内容</p> </div>
          }

        </div>
      </div>
    </div>
  )


  function changTabs(key) {
    setTabskey(key)
  }

}

const CreateDesc = (props) => {

  const escape2Html = str => {
    var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
    return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) { return arrEntities[t] });
  }

  return (
    <div dangerouslySetInnerHTML={{ __html: escape2Html(props.desc) }} >

    </div>
  )
}

export default GoodsDetailInfo
